<template>
  <div>
    <h1>详情页面</h1>

    <input type="text" placeholder="用户名" v-model="username" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
    };
  },

  async beforeRouteLeave(to, from, next) {
    // const bol = window.confirm("你确定吗?");
    // console.log(bol);
    // if (bol) {
    //   // 放行
    //   next();
    //   next(true)
    // } else {
    //   // 不放行
    //   next(false);
    // }
    // next(window.confirm("你确定吗?"));
    // setTimeout(() => {
    //   // 隔1秒放行  可行
    //   next();
    // }, 1000);

    // this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    //   confirmButtonText: "确定",
    //   cancelButtonText: "取消",
    //   type: "warning",
    //   closeOnHashChange: false, // 注意,这个不配置为false的话,弹窗会一闪而过
    // })
    //   .then(() => {
    //     next();
    //   })
    //   .catch(() => {
    //     next(false);
    //   });

    try {
      // 包裹一些可能会出错的代码\
      await this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnHashChange: false, // 注意,这个不配置为false的话,弹窗会一闪而过
      });

      console.log("取消时,有没有输出");
      next();

      // if (boll === "confirm") {
      //   next();
      // } else {
      //   next(false);
      // }
    } catch (error) {
      console.log("try 里面有问题,或者被抛出了异常就会执行这二", error);
      next(false);
    }
  },
};
</script>
